<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        *{
            margin: 0;padding: 0;
        }
        body{
            background-color: #f7f7f7;
        }
        .header{
            width: 100%;height: 50px;background-color:#42c055 ;
            position: relative;
        }
        .header .wrapImg{
            width: 80%;
            height: 30px;
            border: 1px #fff solid;
            border-radius: 5px;
            background-color: #fff;
            position: absolute;
            left: 10px;
            top: 10px;
            
        }
        .header .input{
            border: none;outline: none;
            background-color: transparent;
            position: absolute;
            width: 80%;
            height:30px ;
            text-indent: 30px;
        }
        .header .rightImg{
            width: 25px;
            position: absolute;
            left: 0;
            top: 3px;
        }
        .header .leftImg{
            width: 20px;
            position: absolute;
            right: 5px;
            top: 5px;
        }
        .header .msgImg{
            position: absolute;
            width: 30px;
            right: 10px;
            top: 10px;
        }
        .footer{
            width: 100%;
            height: 60px;
            position: fixed;
            bottom: 0;
            left: 0;
            border-top: 1px #ccc solid;
            display: flex;
        }
        .footer .cfooter{
            display: block;
            flex: 1;
            height: 100%;
            color: gray;
            text-decoration: none;
            position: relative;
            float: left;
        }
        .footer .cfooter:hover{
            color: #39c247;
        }
        .footer img{
            width: 50px;
            height: 40px;
            position: absolute;
            top: 2px;
            left: 50%;
            transform: translateX(-50%);
            
        }
        .footer span{
            font-size: 13px;
            width: 50px;
            text-align: center;
            position: absolute;
            top: 42px;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div id="box">
        <myheader></myheader>
        <myfooter></myfooter>
    </div>

    <template id="h">
        <header class="header">
            <div class="wrapImg">
                <img class="rightImg" src="./img/ic_search_gray.png" alt="">
                <input class="input" type="text" placeholder="影视 图书 唱片 小组等">
                <img class="leftImg" src="./img/ic_scan_gray.png" alt="">
            </div>
            <img src="./img/ic_chat_white.png" alt="" class="msgImg">
        </header>
    </template>
    <template id="f">
        <footer class="footer">
           <child-footer text='首页' img-icon='./img/1.png'></child-footer>
           <child-footer text="书影音" img-icon='./img/2.png'></child-footer>
           <child-footer text="广播" img-icon='./img/3.png'></child-footer>
           <child-footer text="小组" img-icon='./img/4.png'></child-footer>
           <child-footer text="我的" img-icon='./img/5.png'></child-footer>
        </footer>
    </template>
    <template id="cf">
        <a href="#" class="cfooter">
            <img :src="imgIcon" alt="">
            <span>{{text}}</span>
        </a>
    </template>
    <script>
        var vm=new Vue({
            el:"#box",
            data:{},
            components:{
                myheader:{
                    template:"#h"
                },
                myfooter:{
                    template:"#f",
                    components:{
                        childFooter:{
                            template:'#cf',
                            props:['text','imgIcon']
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>